<template>
	<view class="success-container">
		<!-- 成功图标和标题 -->
		<view class="success-header">
			<view class="success-icon">
				<u-icon name="checkmark-circle-fill" size="80" color="#52c41a"></u-icon>
			</view>
			<text class="success-title">{{ successTitle }}</text>
			<!-- <text class="success-subtitle">{{ successSubtitle }}</text> -->
		</view>

		<!-- 订单信息 -->
		<view class="order-info-card">
			<view class="info-item" v-if="orderInfo.orderNo">
				<text class="info-label">订单号：</text>
				<text class="info-value">{{ orderInfo.orderNo }}</text>
			</view>
			<view class="info-item" v-if="orderInfo.amount">
				<text class="info-label">{{ paymentType === 'points' ? '消耗积分：' : '支付金额：' }}</text>
				<text class="info-value amount">{{ orderInfo.amount }}{{ paymentType === 'points' ? '积分' : '元' }}</text>
			</view>
			<view class="info-item" v-if="orderInfo.payTime">
				<text class="info-label">{{ paymentType === 'points' ? '兑换时间：' : '支付时间：' }}</text>
				<text class="info-value">{{ orderInfo.payTime }}</text>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<button class="btn btn-secondary" @click="goHome">返回首页</button>
			<button class="btn btn-primary" @click="viewOrder">查看订单</button>
		</view>

		<!-- 温馨提示 -->
		<!-- <view class="tips-section">
			<text class="tips-title">温馨提示</text>
			<text class="tips-content" v-if="paymentType === 'points'">
				积分兑换成功，您可以在"我的订单"中查看兑换详情
			</text>
			<text class="tips-content" v-else>
				支付成功，我们将尽快为您安排发货，请耐心等待
			</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paymentType: 'normal', // normal: 普通订单, points: 积分订单
				orderInfo: {
					orderNo: '',
					amount: '',
					payTime: ''
				}
			}
		},
		computed: {
			successTitle() {
				return this.paymentType === 'points' ? '兑换成功！' : '支付成功！'
			},
			successSubtitle() {
				return this.paymentType === 'points' ? '积分兑换已完成' : '您的订单已支付成功'
			}
		},
		onLoad(options) {
			// 获取页面参数
			if (options.type) {
				this.paymentType = options.type
			}
			if (options.orderNo) {
				this.orderInfo.orderNo = options.orderNo
			}
			if (options.amount) {
				this.orderInfo.amount = options.amount
			}

			// 设置支付时间为当前时间
			this.orderInfo.payTime = this.formatTime(new Date())
		},
		methods: {
			// 返回首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 查看订单
			viewOrder() {
				if (this.paymentType === 'points') {
					// 积分订单跳转到积分订单列表
					uni.navigateTo({
						url: '/points-package/order/points-payment'
					})
				} else {
					// 普通订单跳转到订单列表
					uni.navigateTo({
						url: '/pages/user/balance-detail'
					})
				}
			},
			// 格式化时间
			formatTime(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				const seconds = String(date.getSeconds()).padStart(2, '0')

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.success-container {
		min-height: 100vh;
		background-color: #f8f9fa;
		padding: 60rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.success-header {
		text-align: center;
		margin-bottom: 60rpx;
	}

	.success-icon {
		margin-bottom: 30rpx;
	}

	.success-title {
		display: block;
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 16rpx;
	}

	.success-subtitle {
		display: block;
		font-size: 28rpx;
		color: #666;
	}

	.order-info-card {
		width: 100%;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 40rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.info-label {
		font-size: 28rpx;
		color: #666;
	}

	.info-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.info-value.amount {
		color: #1c705e;
		font-weight: bold;
		font-size: 32rpx;
	}

	.action-buttons {
		width: 100%;
		display: flex;
		gap: 20rpx;
		margin-bottom: 60rpx;
	}

	.btn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn-secondary {
		background-color: #f5f5f5;
		color: #666;
	}

	.btn-primary {
		background-color: #1c705e;
		color: #ffffff;
	}

	.tips-section {
		width: 100%;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.tips-title {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 16rpx;
	}

	.tips-content {
		display: block;
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
	}
</style>